@include comp(page-card) {
  &.page-card-horizontal {
    & > div {
      background-color: transparent;

      &.#{componentName(page-card-title)} {
        background-color: plv(bg-2);
        border-bottom: none;
      }

      & + * {
        border-top: none !important;
      }
    }

    .page-card-horizontal-body {
      display: flex;
      flex: 1;
      padding: 0 !important;

      & > .page-card-horizontal-content {
        background-color: plv(bg-2);
        position: relative;

        & > .page-card-horizontal-content-inner {
          position: absolute;
          inset: 0;
        }
      }
    }
  }
}

.app-container {
  @include sizeMixin(app-container, ()) {
    @include comp(page-card) {
      &.page-card-horizontal {
        .#{componentName(page-card-title)} {
          border-radius: $border-radius;
        }

        & > * + * {
          margin-top: $margin;
        }

        .page-card-horizontal-body {
          & > div {
            border-radius: $border-radius;
            position: relative;

            &:not(.no-padding) {
              .page-card-horizontal-content-inner {
                padding: $margin;
                box-sizing: border-box;
              }
            }
          }

          & > * + * {
            margin-left: $margin;
          }
        }
      }
    }
  }
}
